<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>沃店</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min
.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/uploadView.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #fff;
        }

        .order {
            margin-top: 20px;
        }

        .am-selected {
            width: 100%;
        }

        .am-selected-status {
            color: #FEB74D;
        }

        .am-btn-default {
            border-color: #ccc;
            border-radius: 5px;
        }

        .idphoto {
            overflow: auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            height: 130px;
            width: 100%;
        }

        .type {
            overflow: auto;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            width: 100%;
        }

        .js_showBox {
        }

        .js_uploadBox {
            margin-top: 10px;
        }

        input[type="radio"] {
            margin: 5px 5px 0px 5px;
            display: none;
        }

        .type label {
            cursor: pointer;
            padding-left: 20px;
            line-height: 16px;
            margin-top: 3px;
            margin-left: 3px;
            background: url(${pageContext.request.contextPath}/images/circle.png) no-repeat;

        }

        .radio-label:checked + label {
            background: url(${pageContext.request.contextPath}/images/draw.png) no-repeat;
        }

        .label_checked {
            background: url(${pageContext.request.contextPath}/images/draw.png) no-repeat !important;
        }

    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="${pageContext.request.contextPath}/clientHome/index" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">
            续费订单
        </a>
    </h1>
</header>
<form class="am-form" enctype="multipart/form-data" method="post"
      action="${pageContext.request.contextPath}/clientRenewal/add">
    <fieldset>
        <div class="am-g order">
            <div class="clearpadding am-u-sm-12">
                <select data-am-selected id="area" name="orgId">
                    <option>片区选择</option>
                    <option v-for="item in regionlist" v-bind:value="item.id">{{item.organizationName}}</option>
                </select>
            </div>
        </div>
        <div class="am-form-group">
            <label class="font_orange">宽带帐号</label>
            <input type="text" class="" name="account">
            <span style="font-size: 10px;color:#D7D7D7;">忘记宽带帐号，请拨打10010</span>
        </div>

        <div class="am-form-group">
            <label class="font_orange">姓名</label>
            <input type="text" class="" name="name">
        </div>
        <div class="am-form-group">
            <label class="font_orange">身份证号</label>
            <input type="text" class="" name="identity">
        </div>
        <div class="am-form-group">
            <label class="font_orange">联系电话</label>
            <input type="text" class="" name="phone">
        </div>
        <%--<div class="am-form-group" style="overflow: auto;">--%>
        <%--<label class="font_orange">身份证照片</label>--%>
        <%--<div class="am-g idphoto">--%>
        <%--<div class="control-group js_uploadBox">--%>
        <%--<div class="am-u-sm-6 " id="divi" onclick="deleteInput('i')">--%>
        <%--<div class="btn-upload">--%>
        <%--<a href="javascript:void(0);"><i class="am-icon-picture-o am-icon-md"--%>
        <%--style="color:rgba(0,0,0,0.4)"></i><span--%>
        <%--class="js_uploadText" style="font-size:24px"></span></a>--%>
        <%--<input id="js_upFile" class="js_upFile" type="file" name="cardImages">--%>
        <%--</div>--%>
        <%--<div class="js_showBox"></div>--%>
        <%--</div>--%>
        <%--</div>--%>
        <%--</div>--%>
        <%--</div>--%>


        <div class="am-g" align="center" onclick="subOrder()">
            <img src="${pageContext.request.contextPath}/images/submit_order.png">
        </div>
    </fieldset>
</form>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery-labelauty.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.uploadView.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery.uploadView.add.js"></script>
<script type="text/javascript">
    var area;
    var types;
    $.ajax({
        type: "get",
        async: false,
        url: '${pageContext.request.contextPath}/clientOrg/getAll',
        dataType: 'json',
        success: function (data) {
            if (data.success == true && data.code == 200) {
                area = new Vue({
                    el: "#area",
                    data: {
                        regionlist: data.obj
                    }
                });
            }
            $("#area").change(function () {
                var html = $(".am-selected-status").text();
                html = "片区选择" + "<font style='color:#000;margin-left:10px;'>" + html + "</font>";
                $(".am-selected-status").text("").html(html);
            });
        },
        error: function () {
            layer.msg('网络超时');
        }

    });
    $.ajax({
        type: "get",
        async: false,
        url: '${pageContext.request.contextPath}/clientSetting/getFaultType',
        dataType: 'json',
        success: function (data) {
            if (data.success == true && data.code == 200) {
                types = new Vue({
                    el: "#types",
                    data: {
                        items: data.obj
                    }
                });
                $(".staff").click(function () {
                    $('input[type="radio"]').removeAttr('checked');
                    $('label').removeClass('label_checked');
                    $(this).prev().attr('checked', 'checked');
                    $(this).addClass('label_checked');

                });
                $(".staff").each(function () {
                    $(this).attr("for", $(this).prev().val());
                });
            }
        },
        error: function () {
            layer.msg('网络超时');
        }

    });

    var isSubmit = 0;

    function subOrder() {
        if ($("#area").val() == "片区选择") {
            layer.msg('请选择片区');
            return;
        }
        if ($("input[name='name']").val() == "") {
            layer.msg('请填写姓名');
            return;
        }

        if ($("input[name='account']").val() == "") {
            layer.msg('请填写宽带帐号');
            return;
        }

        if ($("input[name='phone']").val() == '') {
            layer.msg('请填写联系电话');
            return;
        }
//        if ($("input[name='identity']").val() == "") {
//            layer.msg('请填写身份证号');
//            return;
//        }


        if (isSubmit == 0) {
            $(".am-form").submit();
            isSubmit = 1;
        } else {
            layer.msg('您已经提交订单了！');
        }
    }

</script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
</body>

</html>
